{% extends "base.html" %}
{% block title %}编辑个人资料 - {{ user.real_name }} - 乒乓球培训管理系统{% endblock %}
{% block page_title %}编辑个人资料{% endblock %}

{% block extra_css %}
<style>
.edit-container {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 0;
    overflow: hidden;
    margin-bottom: 2rem;
}

.edit-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    text-align: center;
    position: relative;
}

.edit-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: rgba(255,255,255,0.1);
    transform: rotate(45deg);
    pointer-events: none;
}

.edit-content {
    padding: 2rem;
}

.form-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 15px;
    border-left: 4px solid #007bff;
}

.section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-floating {
    margin-bottom: 1rem;
}

.form-floating .form-control:focus,
.form-floating .form-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.form-floating .form-control,
.form-floating .form-select {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.form-floating .form-control:hover,
.form-floating .form-select:hover {
    border-color: #dee2e6;
}

.current-avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #e9ecef;
    transition: border-color 0.3s ease;
}

.current-avatar:hover {
    border-color: #667eea;
}

.avatar-placeholder {
    width: 120px;
    height: 120px;
    background: #f8f9fa;
    border: 4px solid #e9ecef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 3rem;
}

.btn-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 150px;
    justify-content: center;
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
    color: white;
}

.btn-outline-gradient {
    background: transparent;
    border: 2px solid #667eea;
    color: #667eea;
    padding: 0.75rem 2rem;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 150px;
    justify-content: center;
}

.btn-outline-gradient:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.character-counter {
    font-size: 0.875rem;
    color: #6c757d;
    text-align: right;
    margin-top: 0.25rem;
}

.character-counter.warning {
    color: #ffc107;
}

.character-counter.danger {
    color: #dc3545;
}

.coach-specific {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.coach-badge {
    background: rgba(255,255,255,0.2);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.form-hint {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.readonly-field {
    background-color: #f8f9fa !important;
    color: #6c757d;
    cursor: not-allowed;
}

.required-indicator {
    color: #dc3545;
    font-weight: bold;
}

@media (max-width: 768px) {
    .edit-container {
        margin: 1rem;
        border-radius: 15px;
    }

    .edit-header {
        padding: 1.5rem;
    }

    .edit-content {
        padding: 1.5rem;
    }

    .form-section {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .btn-gradient,
    .btn-outline-gradient {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 返回按钮 -->
    <div class="mb-3">
        <a href="{{ url_for('profile.view') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> 返回个人资料
        </a>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="edit-container">
                <div class="edit-header">
                    <h3 class="mb-2">编辑个人资料</h3>
                    <p class="mb-0 opacity-75">完善您的个人信息，让其他用户更好地了解您</p>
                    {% if user.is_coach() %}
                    <div class="coach-badge mt-3">
                        <i class="bi bi-award"></i>
                        教练专业资料编辑
                    </div>
                    {% endif %}
                </div>

                <div class="edit-content">
                    <form method="POST" id="editForm">
                        {{ form.hidden_tag() }}

                        <!-- 基本信息 -->
                        <div class="form-section">
                            <h5 class="section-title">
                                <i class="bi bi-person-lines-fill"></i>
                                基本信息
                            </h5>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        {{ form.real_name(class="form-control") }}
                                        {{ form.real_name.label(class="form-label") }}
                                        <span class="required-indicator">*</span>
                                        {% if form.real_name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.real_name.errors %}
                                                <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        {{ form.phone(class="form-control readonly-field") }}
                                        {{ form.phone.label(class="form-label") }}
                                        {% if form.phone.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.phone.errors %}
                                                <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="form-hint">手机号不可修改，如需更改请联系管理员</div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-8">
                                    <div class="form-floating">
                                        {{ form.email(class="form-control") }}
                                        {{ form.email.label(class="form-label") }}
                                        {% if form.email.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.email.errors %}
                                                <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-floating">
                                        {{ form.age(class="form-control") }}
                                        {{ form.age.label(class="form-label") }}
                                        {% if form.age.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.age.errors %}
                                                <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        {{ form.gender(class="form-select") }}
                                        {{ form.gender.label(class="form-label") }}
                                        {% if form.gender.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.gender.errors %}
                                                <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <!-- 头像预览 -->
                                    <div class="text-center">
                                        <label class="form-label">当前头像</label>
                                        <div class="d-flex justify-content-center">
                                            {% if user.photo_url %}
                                            <img src="{{ user.photo_url }}" alt="当前头像" class="current-avatar">
                                            {% else %}
                                            <div class="avatar-placeholder">
                                                <i class="bi bi-person-fill"></i>
                                            </div>
                                            {% endif %}
                                        </div>
                                        <div class="mt-2">
                                            <a href="{{ url_for('profile.upload_avatar') }}" class="btn btn-sm btn-outline-primary">
                                                <i class="bi bi-camera"></i> 更换头像
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-floating">
                                {{ form.bio(class="form-control", style="height: 120px") }}
                                {{ form.bio.label(class="form-label") }}
                                {% if form.bio.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.bio.errors %}
                                        <small>{{ error }}</small>
                                    {% endfor %}
                                </div>
                                {% endif %}
                                <div class="character-counter" id="bioCounter">0/500</div>
                            </div>
                        </div>

                        <!-- 教练专业信息 -->
                        {% if user.is_coach() %}
                        <div class="coach-specific">
                            <h5 class="section-title text-white">
                                <i class="bi bi-award"></i>
                                专业信息
                            </h5>
                        </div>

                        <div class="form-section">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-floating">
                                        {{ form.coach_level(class="form-select") }}
                                        {{ form.coach_level.label(class="form-label") }}
                                        {% if form.coach_level.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.coach_level.errors %}
                                                <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-floating">
                                        {{ form.hourly_rate(class="form-control") }}
                                        {{ form.hourly_rate.label(class="form-label") }}
                                        {% if form.hourly_rate.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.hourly_rate.errors %}
                                                <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="form-hint">建议价格范围：30-200元/小时</div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-floating">
                                        {{ form.experience_years(class="form-control") }}
                                        {{ form.experience_years.label(class="form-label") }}
                                        {% if form.experience_years.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.experience_years.errors %}
                                                <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>

                            <div class="form-floating">
                                {{ form.teaching_style(class="form-control", style="height: 100px") }}
                                {{ form.teaching_style.label(class="form-label") }}
                                {% if form.teaching_style.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.teaching_style.errors %}
                                        <small>{{ error }}</small>
                                    {% endfor %}
                                </div>
                                {% endif %}
                                <div class="character-counter" id="styleCounter">0/500</div>
                            </div>

                            <div class="form-floating">
                                {{ form.achievements(class="form-control", style="height: 120px") }}
                                {{ form.achievements.label(class="form-label") }}
                                {% if form.achievements.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.achievements.errors %}
                                        <small>{{ error }}</small>
                                    {% endfor %}
                                </div>
                                {% endif %}
                                <div class="character-counter" id="achievementsCounter">0/1000</div>
                            </div>
                        </div>
                        {% endif %}

                        <!-- 提交按钮 -->
                        <div class="text-center">
                            <button type="submit" class="btn-gradient me-3">
                                <i class="bi bi-check-lg"></i>
                                保存修改
                            </button>
                            <a href="{{ url_for('profile.view') }}" class="btn-outline-gradient">
                                <i class="bi bi-x-lg"></i>
                                取消
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 字符计数器
function updateCharacterCounter(inputId, counterId, maxLength) {
    const input = document.getElementById(inputId);
    const counter = document.getElementById(counterId);

    if (input && counter) {
        function updateCount() {
            const currentLength = input.value.length;
            counter.textContent = `${currentLength}/${maxLength}`;

            // 根据字符数量改变颜色
            counter.className = 'character-counter';
            if (currentLength > maxLength * 0.9) {
                counter.classList.add('danger');
            } else if (currentLength > maxLength * 0.7) {
                counter.classList.add('warning');
            }
        }

        input.addEventListener('input', updateCount);
        updateCount(); // 初始化
    }
}

// 初始化字符计数器
document.addEventListener('DOMContentLoaded', function() {
    updateCharacterCounter('id-bio', 'bioCounter', 500);

    {% if user.is_coach() %}
    updateCharacterCounter('id-teaching_style', 'styleCounter', 500);
    updateCharacterCounter('id-achievements', 'achievementsCounter', 1000);
    {% endif %}
});

// 表单验证
document.getElementById('editForm').addEventListener('submit', function(e) {
    const realName = document.getElementById('id-real_name').value.trim();

    if (!realName) {
        e.preventDefault();
        alert('请输入真实姓名');
        document.getElementById('id-real_name').focus();
        return;
    }

    if (realName.length < 2 || realName.length > 50) {
        e.preventDefault();
        alert('姓名长度必须在2-50个字符之间');
        document.getElementById('id-real_name').focus();
        return;
    }

    // 验证邮箱格式
    const email = document.getElementById('id-email').value.trim();
    if (email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            e.preventDefault();
            alert('请输入正确的邮箱格式');
            document.getElementById('id-email').focus();
            return;
        }
    }

    {% if user.is_coach() %}
    // 验证教练课时费
    const hourlyRate = document.getElementById('id-hourly_rate').value.trim();
    if (hourlyRate) {
        const rate = parseFloat(hourlyRate);
        if (isNaN(rate) || rate < 0 || rate > 1000) {
            e.preventDefault();
            alert('课时费必须在0-1000元之间');
            document.getElementById('id-hourly_rate').focus();
            return;
        }
    }
    {% endif %}

    // 显示提交状态
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>保存中...';
    submitBtn.disabled = true;

    // 防止重复提交
    setTimeout(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    }, 5000);
});

// 输入框焦点效果
document.querySelectorAll('.form-control, .form-select').forEach(input => {
    input.addEventListener('focus', function() {
        this.parentElement.style.transform = 'scale(1.02)';
        this.parentElement.style.transition = 'transform 0.2s ease';
    });

    input.addEventListener('blur', function() {
        this.parentElement.style.transform = 'scale(1)';
    });
});

// 实时保存提示
let saveTimer;
document.querySelectorAll('input[type="text"], input[type="email"], input[type="number"], select, textarea').forEach(input => {
    input.addEventListener('input', function() {
        clearTimeout(saveTimer);

        // 显示保存提示
        const indicator = document.createElement('small');
        indicator.textContent = '有未保存的更改';
        indicator.className = 'text-warning';
        indicator.id = 'save-indicator';

        // 移除现有提示
        const existing = document.getElementById('save-indicator');
        if (existing) {
            existing.remove();
        }

        // 添加新提示
        document.querySelector('.edit-header').appendChild(indicator);

        // 3秒后移除提示
        saveTimer = setTimeout(() => {
            indicator.remove();
        }, 3000);
    });
});

// 页面离开前确认
window.addEventListener('beforeunload', function(e) {
    const indicator = document.getElementById('save-indicator');
    if (indicator) {
        e.preventDefault();
        e.returnValue = '';
        return '您有未保存的更改，确定要离开吗？';
    }
});
</script>
{% endblock %}